<div class="modal-header">
  <button type="button" class="close" ng-click="$close()">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <h4 class="modal-title">Client {$ clientId $}: {$ fieldPath $} history</h4>
</div>
<div class="modal-body">
  <div ng-if="controller.items === undefined" class="text-center">
    <i class="fa fa-spinner fa-spin fa-3x margin-bottom"></i>
    <div>Loading...</div>
  </div>

  <div ng-if="controller.items !== undefined"
       grr-force-refresh refresh-trigger="controller.items">

    <p class="text-right">
      <em>
        Time range <strong>from</strong>
        <grr-semantic-value value="::controller.startTime"></grr-semantic-value>
        <strong>to</strong>
        <grr-semantic-value value="::controller.endTime"></grr-semantic-value>
      </em>
    </p>

    <table class="table table-condensed history">
      <thead>
        <tr>
          <th>Time</th>
          <th>Version</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in ::controller.items">
          <td class="time">
            <grr-semantic-value value="::item[0]"></grr-semantic-value>
          </td>
          <td class="version">
            <grr-semantic-value value="::item[1]"></grr-semantic-value>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="close()">Close</button>
</div>
